<template>
  <div class="articles-add">
    <el-dialog
      :title="`${currArticle.id ? '修改' : '新增'}文章`"
      :visible="showDialog"
      width="800px"
      @close="btnCancel"
    >
      <el-form
        ref="currArticle"
        :model="currArticle"
        :rules="formRules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="文章标题：" prop="title">
          <el-input
            v-model="currArticle.title"
            placeholder="请输入文章标签"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容：" prop="articleBody">
          <quill-editor
            @blur="checkContent"
            v-model="currArticle.articleBody"
            :options="editorOptions"
          ></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址：" prop="videoURL">
          <el-input
            v-model="currArticle.videoURL"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- footer插槽 -->
      <template v-slot:footer>
        <el-row style="text-align: right">
          <el-col>
            <el-button size="small" @click="btnCancel">取消</el-button>
            <el-button type="primary" size="small" @click="btnOk"
              >确认</el-button
            >
          </el-col>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from "@/api/hmmm/articles";
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: {
    quillEditor,
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    currArticle: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      formRules: {
        title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
        articleBody: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
        ],
      },
      editorOptions: {
        placeholder: "",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            ["blockquote"], // 引用
            ["code-block", "image", "link"], //代码块 图片 链接
          ],
        },
      },
    };
  },
  methods: {
    checkContent() {
      this.$refs.currArticle.validateField("articleBody");
    },
    async btnOk() {
      this.$refs.currArticle.validate(async (valid) => {
        if (valid) {
          if (!this.currArticle.id) {
            //新增
            await add(this.currArticle);
          } else {
            //修改
            await update(this.currArticle);
          }
          this.$message.success("操作成功");
          this.$refs.currArticle.clearValidate();
          this.$emit("update:showDialog", false);
        }
        this.$emit("updateList");
      });
    },
    btnCancel() {
      this.$refs.currArticle.clearValidate();
      this.$emit("update:showDialog", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.articles-add ::v-deep .ql-editor {
  height: 200px;
}
.articles-add ::v-deep .ql-toolbar.ql-snow {
  padding: 0 8px;
}
</style>
